<template>
  <!-- 手机通讯 -->
  <div>
    <van-image
      width="100%"
      height="100"
      v-if="sortTitles.length && sortTitles[ListLeftValue].mainImgUrl"
      :src="sortTitles[ListLeftValue].mainImgUrl"
    />
    <div v-if="sortTitles.length">
      <div
        v-for="(titleH, value) in sortTitles[ListLeftValue].list"
        :key="value"
      >
        <h3>
          {{ titleH.title }}
        </h3>
        <van-grid :column-num="3" :border="false" icon-size="80">
          <van-grid-item
            v-for="(titleL, valu) in titleH.productList"
            :key="valu"
            :icon="titleL.imgUrl"
            :text="titleL.title"
          />
        </van-grid>
      </div>
    </div>
    <!-- <h3>手机配件</h3>
    <van-grid :column-num="3" :border="false" icon-size="80">
      <van-grid-item
        v-for="value in 3"
        :key="value"
        icon="https://img01.yzcdn.cn/vant/cat.jpeg"
        text="大灰猫"
      />
    </van-grid>
    <h3>手机维修</h3>
    <van-grid :column-num="3" :border="false" icon-size="80">
      <van-grid-item
        v-for="value in 7"
        :key="value"
        icon="https://img01.yzcdn.cn/vant/cat.jpeg"
        text="大灰猫"
      />
    </van-grid> -->
  </div>
</template>

<script>
import Vue from 'vue';
import { Image as VanImage, Grid, GridItem } from 'vant';

Vue.use(Grid);
Vue.use(GridItem);
Vue.use(VanImage);
export default {
  props: {
    titles: { type: Array },
    ListLeftValue: { type: Number },
  },
  data() {
    return {
      sortTitles: [],
      // ListLeftValue: null,
    };
  },

  watch: {
    // 响应式监听
    titles(val) {
      this.sortTitles = val;
      // console.log('嘻嘻嘻', val);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>